<!-- 课程对话框调试 -->
<template>
  <!-- Form -->
  <el-button text @click="dialogFormVisible = true">
    编辑
  </el-button>

  <el-dialog v-model="dialogFormVisible" title="Shipping address">
    <el-form :model="formDatas">
      <el-form-item label="班级名称" :label-width="formLabelWidth">
        <el-input v-model="formDatas.className" type="text" clearable></el-input>
      </el-form-item>
      <el-col :span="12" class="grid-cell">
        <el-form-item label="图片" prop="picture" class="required">
          <el-upload :file-list="pictureFileList" :headers="pictureUploadHeaders" label-width="formLabelWidth" :data="pictureUploadData"
            list-type="picture-card" show-file-list :limit="3"> <template #default><i></i></template></el-upload>
        </el-form-item>
        <el-form-item label="授课讲师" :label-width="formLabelWidth">
        <el-select v-model="formDatas.classType" placeholder="Please select a zone">
          <el-option label="李四" value="1" />
          <el-option label="张三" value="2" />
          <el-option label="王五" value="3" />
          <el-option label="刘七" value="4" />
          <el-option label="赵七" value="5" />
          <el-option label="钱七" value="6" />
          <el-option label="孙八" value="6" />
        </el-select>
      </el-form-item>
      </el-col>
        <el-form-item label="课程类型"  label-width="formLabelWidth" >
            <el-radio-group v-model="radio" :label-width="formLabelWidth">
            <el-radio :label="3">公开课</el-radio>
            <el-radio :label="6">内部课</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-col :span="24" class="grid-cell">
        <el-form-item label="课程资料" prop="courseMaterials">
          <el-upload :file-list="courseMaterialsFileList" :headers="courseMaterialsUploadHeaders"
            :data="courseMaterialsUploadData" list-type="picture-card" show-file-list :limit="3"> <template
              #default><i class="el-icon-plus"></i></template></el-upload>
        </el-form-item>
      </el-col>
      <el-form-item label="课程介绍" :label-width="formLabelWidth">
        <el-input v-model="formDatas.courseIntroduction" type="text" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { reactive, ref,toRefs } from 'vue'
 export default {
 name: '',
 data: function(){
 return {
 }
 },
 methods:{
 },
 setup(){
        const radio = ref(2)
        const dialogFormVisible = ref(false)
        const formLabelWidth = '140px'
        const form = reactive({
          formDatas: {
          className: "",
          picture: null,
          select99359: 7,
          classType: '2',
          courseMaterials: null,
          courseIntroduction: "",
        },
    })
    const gridData = [
        {
            date: '2016-05-02',
            name: 'John Smith',
            address: 'No.1518,  Jinshajiang Road, Putuo District',
        },
        {
            date: '2016-05-04',
            name: 'John Smith',
            address: 'No.1518,  Jinshajiang Road, Putuo District',
        },
        {
            date: '2016-05-01',
            name: 'John Smith',
            address: 'No.1518,  Jinshajiang Road, Putuo District',
        },
        {
            date: '2016-05-03',
            name: 'John Smith',
            address: 'No.1518,  Jinshajiang Road, Putuo District',
        },
        ]
        return{
            ...toRefs(form),
            gridData,
            dialogFormVisible,
            formLabelWidth,
            radio
        }
 }
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
</style>